<template>
	<view class="container savepadding">
		<view v-if="showPwd" style="margin: 40rpx 0;">
			<view :class="pwdArr.length == 8?'top2':'top'">
				<text class="password-box" v-for="(num,index) in pwdArr" :key="index">{{num}}</text>
			</view>
			<view class="tips copy" @click="copy(pwdArr)">
				复制密码
			</view>
			<view class="middel">
				<view class="middle-line num1">
					<text class="left">生效日期</text>
					<text class="right">{{ passStartTime }}</text>
				</view>
				<view class="middle-line num1">
					<text class="left">失效日期</text>
					<text class="right">{{ passEndTime }}</text>
				</view>
			</view>			
			<view class="middel" v-if="roleType==1">
				<view class="middle-line">
					<text class="left">对房客显示</text>
					<switch class="right" @change="switchChange" :checked="switchStatus" color="#1D78F7" />
				</view>
			</view>
		</view>
		<view v-else class="no-content">
			<image style="width: 222rpx; height: 146rpx;" src="@/static/room/nocontent.png" mode="aspectFit"></image>
			<text class="no-num">暂无密码</text>
		</view>
		<view class="bottom-box" v-if="roleType==1">
			<view class="btn" @click="choose" :class="isCreatePwd? 'disabled' : ''">
				{{isCreatePwd?createType==2?'请等待'+seconds+'秒':'正在生成':passWord?'重新创建密码':'创建密码'}}
			</view>
		</view>
	</view>
</template>

<script>
	import util from '@/utils/util.js';
	import bleUtils from '@/utils/BleUtils.js';
	import {
		cmd63
	} from '@/utils/cmd/index.js';
	import {
		updateSendPass,
		getGroupWifiLockPassword,
		showPassword
	} from '@/api/lock.js'
	export default {
		data() {
			return {
				lockId: '',
				lockMac: '',
				sendPass: 0,
				passWord: '',
				pwdArr: [],
				userId: this.$userInfo.userId,
				roleType: this.$userInfo.roleType,//1：房东，2：房客
				switchStatus: false, // 是否下发过密码
				showPwd: true, 

				passStartTime: '',
				passEndTime: '',
				showPassword: 0, //0：不展示，1：展示 (对房客)
			}
		},
		onLoad(options) {
			const lockInfo = this.$store.state.lockInfo;
			this.lockId = lockInfo.lockId;
			this.lockMac = lockInfo.mac.toUpperCase();
			// if (this.roleType == 0) {
			// 	this.sendPass = lockInfo.sendPass; // 1:下发 0不下发
			// }
			this.passStartTime = lockInfo.passStartTime;
			this.passEndTime  = lockInfo.passEndTime;
			this.showPassword = lockInfo.showPassword;
			if (this.roleType == 2) { //1：房东，2：房客
				this.showPwd = (lockInfo.showPassword == 1)?true:false; // 0：不展示，1：展示
			}						
			this.switchStatus = (lockInfo.showPassword == 1)?true:false;
		},
		onShow() {
			// 查询数字密码
			util.loading('查询数字密码...');
			if (this.roleType == 2) { //1：房东，2：房客
				if (this.showPassword == 0) {  //是否对房客展示密码
					util.hideLoading();
					return;
				}
				// if (this.sendPass == 0) {
				// 	return;
				// }
			}
			this.getWifiPwd(1);
		},
		onUnload() {
			if (this.timer) clearInterval(this.timer)
		},
		methods: {
			// 复制密码
			copy(value) {
				let password = value.join('');
				uni.setClipboardData({
					data: password, //要被复制的内容
					success: () => { //复制成功的回调函数
						util.toast('已复制到剪切板');
					}
				});
			},
			// 创建密码
			choose() {
				uni.showActionSheet({
					itemList: ['我在锁前', '远程密码'],
					success: (res) => {
						util.loading('正在生成数字密码...')
						if (res.tapIndex == 0) { // 蓝牙密码
							this.createType = 1;
							uni.navigateTo({
								url: '/pages/common/numPassword/tips'
							})
						} else if (res.tapIndex == 1) { // 远程密码
							this.createType = 2;
							uni.navigateTo({ // 设置密码有效期
								url: '/pages/common/numPassword/createPassword?createType=2'
							})							
						}
					}
				})
			},			
			async getWifiPwd(createType = 1) {
				try {
					const param = {
						lockMac: this.lockMac,
						createType
					}
					const res = await getGroupWifiLockPassword(param);
					util.hideLoading();
					if (res.statecode != 0) {
						uni.showToast({
							title: res.statemsg,
							icon: "none",
							mask: true,
						})
						return;
					}
					this.passWord = res.data.password;
					this.showPwd = !!this.passWord;
					this.pwdArr = this.passWord ? this.passWord.split('') : [];		
					this.passStartTime = res.data.passStartTime;
					this.passEndTime  = res.data.passEndTime;	
					this.showPassword = res.data.showPassword;
					if (this.roleType == 2) { //1：房东，2：房客
						this.showPwd = (this.showPassword == 1)?true:false; // 0：不展示，1：展示
					}						
					this.switchStatus = (this.showPassword == 1)?true:false;												
				} catch (err) {
					util.hideLoading();
					console.log('getGroupWifiLockPassword err', err)
				}
			},
			async switchChange() {
				this.switchStatus = !this.switchStatus
				// const res = await updateSendPass({
				// 	lockId: this.lockId,
				// 	isSendPass: this.switchStatus ? 1 : 0
				// });
				const res = await showPassword({
					lockId: this.lockId
				});
				if (res.statecode != 0) {
					this.switchStatus = !this.switchStatus
					uni.showToast({
						title: res.statemsg,
						icon: "none",
						mask: true,
					})
					return;
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		height: 100vh;
		padding: 0 40rpx;
		background-color: #FFFFFF;
		position: relative;

		.disabled {
			pointer-events: none;
			cursor: default;
			opacity: 0.6;
		}

		.password-box {
			// border-bottom: 1px solid #8F92A0;
			text-align: center;
			display: inline-block;

		}

		.top {
			font-size: 80rpx;
			text-align: center;
			color: #1F2642;
			font-weight: bold;
			margin: 40rpx;
			display: flex;
			justify-content: space-between;
			flex-wrap: nowrap;

			.password-box {
				width: 12%;
			}
		}

		.top2 {
			font-size: 80rpx;
			text-align: center;
			color: #1F2642;
			font-weight: bold;
			margin: 40rpx;
			display: flex;
			justify-content: space-between;
			flex-wrap: nowrap;

			.password-box {
				width: 10%;
			}
		}




		.tips {
			width: 120rpx;
			margin: 40rpx auto;
			text-align: center;
			padding: 16rpx 48rpx;
			font-size: 24rpx;
			color: #FF3434;
			background-color: #feefee;
		}

		.copy {
			width: 96rpx;
			color: #1D78F7;
			background-color: #ecf5fe;
		}

		.middel {
			margin-top: 40rpx;

			.num1 {
				border-bottom: 2rpx solid #E8E9EC;
			}

			.middle-line {
				display: flex;
				justify-content: space-between;
				padding: 20rpx 0;

				.left {
					font-size: 32rpx;
					color: #1F2642;
				}

				.right {
					font-size: 28rpx;
					color: #8F92A0;
				}
			}
		}

		.bottom-box {
			position: absolute;
			bottom: 50rpx;
			text-align: center;
			width: 100%;

			.btn {
				width: 85%;
				font-size: 35rpx;
				padding: 22rpx;
				text-align: center;
				background: linear-gradient(135deg, #4593FF 0%, #1C78F7 100%);
				color: #fff;
				border-radius: 20rpx;
			}

			.text {
				width: 85%;
				font-size: 24rpx;
				color: #8F92A0;
				margin: 20rpx;
			}
		}

		.no-content {
			height: 100%;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;

			.no-num {
				font-size: 28rpx;
				color: #8F92A0;
			}
		}

		/deep/ .uni-popup__wrapper {
			width: 90% !important;
		}

		.result-popup {
			background: #fff;
			border-radius: 20rpx;
			padding: 40rpx 20rpx 20rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			align-items: center;

			.popup-top {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				margin-bottom: 20rpx;

				.popup-topresult {
					font-size: 32rpx;
					color: #1F2642;
					font-weight: bold;
					margin: 40rpx 0 30rpx;
				}

				.popup-toptips {
					font-size: 28rpx;
					color: #62677A;
					margin-top: 10rpx;
				}
			}

			.popup-bottom {
				text-align: center;
				margin: 60rpx 0 20rpx;
				width: 100%;
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				align-items: center;

				.btn {
					width: 40%;
					font-size: 35rpx;
					padding: 22rpx;
					text-align: center;
					border-radius: 10rpx;
				}

				.close {
					background: #fff;
					color: #1D78F7;
					border: 2rpx solid #1D78F7;
				}

				.sure {
					background: linear-gradient(135deg, #4593FF 0%, #1C78F7 100%);
					color: #fff;
					border: 2rpx solid #1D78F7;
				}
			}
		}
	}
</style>